<!DOCTYPE HTML>
<html lang="en-US">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>Device Detail</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.css" />
  <link rel="stylesheet" href="css/style.css" />
   <link rel="stylesheet" type="text/css" href="./css/font.css"/>
  </head>
  <style type="text/css">
  	.cent{
		margin: 15px;
		
	}
	.piece-boot{
		margin-left: 15px;
		font-weight: 700;
		margin-top: 10px;
		color: #2B57DA;
	}
	.cent-page{
		background-color: #fff;
		border-radius: 8px;
	    -webkit-box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
		box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
	}
	.lin-big{
		width: 3px;
		height: 20px;
	    background-color: #2B57DA;
		line-height: 25px;
	}
	.bootom{
		width: 100%;
		height: 50px;
		background-color: #AAAAAA;
		position: fixed;
		bottom: 0;
	}
	.bottom-left-but{
		text-align: center;
		line-height: 50px;
		border: solid 1px #eee; 
		height: 100%;
		width: 100%; 
		font-weight: 600;
		color: #2b58da;
		background-color: #FFFFFF;
	}
	.bottom-right-but{
		text-align: center;
		line-height: 50px;
		border: solid 1px #eee; 
		height: 100%;
		width: 100%; 
		font-weight: 600;
		color: white;
		background-color: #2b58da;
	}
  </style>
  <body>
    <div class="bui-page bui-box-vertical">
        <header>
            <!-- 固定顶部区 -->
          <div class="bui-bar" style="background-color: #FFFFFF;">
          	<div class="bui-bar-left">
          		<a class="bui-btn" onclick="bui.back();"><i class="icon-back" style="color: black;"></i></a>
          	</div>
          	<div class="bui-bar-main" style="color: black; font-weight: 700;">
          		Device Detail
          	</div>
          	<div class="bui-bar-right">
          	</div>
          </div>
        </header>
        <main>
          <!-- 固定中间滚动内容区 -->
		  <div class="cent">
			  <h2 style="font-weight: 600;color: #000000;">Medical protective clothing</h2>
			  <img src="img/aefc49158f849761d93923a3faa7484f.jpg" width="100%"  >
			  <div class="bui-box cent-page" >
				  <div class="span1" style="text-align: center;margin-top: 18px;margin-bottom: 15px;border-right:solid 1px #eee;">
					 
					  <p class="piece-boot">RS <span style="font-size: 18px;">25.00</span></p>
					  <h3 style="color: #aaa;">Minimum return</h3>
				  </div>
				  <div class="span1" style="text-align: center;margin-top: 18px;margin-bottom: 15px;">
					  <p class="piece-boot">RS <span style="font-size: 18px;">40.00</span></p>
					  <h3 style="color: #aaa;">Minimum return</h3>
				  </div>
			  </div>
			  <div class="bui-box" style="margin-top: 15px;">
				  <div class="lin-big"></div>
				  <div class="span1">
					<h3 style="margin-left: 5px;color: #000000;font-weight: 600;">detail</h3>
				  </div>
			  </div>
			  <div style="color: #000000;margin-bottom: 100px;">
				  <p>Type: Whole body chemical. Virus protective clothing (can effectively prevent the penetration of COVID-19 virus)</p>
				  <p>Applicable specifications: JIS T 8115:2015 Type 3, 4, 5, 6</p><p>Form: airtight suit (disposable)</p>
				  <p>Size: M-Size</p>
				  <p>Manufacturer: AstraZeneca</p>
				</div>
				
		  </div>
		  <div class="bootom">
			 <div style="width: 40%;height: 100%;position: absolute;text-align: center;">
				  <p class="bottom-left-but" style="" >RS <span style="font-size: 18px;">500.00</span></p>
			 </div>
			 <div style="width: 60%; height: 100%; right: 0;position: absolute;text-align: center;">
				  <p class="bottom-right-but" >Activate</p>
			 </div>
		  </div>
        </main>
        <footer>
          <!-- 固定底部   -->
        </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js"></script>
    <script>
        bui.ready(function() {
          // 所有控件及方法需要在这里执行
        })
    </script>
  </body>
</html>
